/* 领券中心 */
.page-coupons {
  .coupon-banner {
    font-size: 0;
    margin-top: 35px;
  }

  .coupons-con {
    margin-top: 45px;

    .tit {
      font-size: 18px;
      text-align: center;
      height: 22px;
      line-height: 22px;
      font-weight: 600;
      padding-bottom: 15px;

      .bg-l {
        display: inline-block;
        width: 35px;
        height: 18px;
        background: url(@/assets/images/icons.png) no-repeat 0 -763px;
        margin-top: 4px;
        vertical-align: top;
        margin-right: 15px;
      }

      .bg-r {
        display: inline-block;
        width: 35px;
        height: 18px;
        background: url(@/assets/images/icons.png) no-repeat 0 -763px;
        margin-top: 4px;
        vertical-align: top;
        margin-left: 15px;
      }
    }

    .con-box {
      display: flex;
      flex-wrap: wrap;
    }
  }

  /* 通用券 */
  .coupons-con {
    .con-box {
      .item {
        display: flex;
        width: 348px;
        padding: 20px;
        margin: 18px 18px 0 0;
        border-radius: 5px;
        background: #fff;
        position: relative;
        box-shadow: 0 5px 20px rgba(0, 0, 0, .05);
        transition: all 0.2s;

        &:hover {
          box-shadow: 0 5px 20px rgba(0, 0, 0, .09);

          &::before {
            background: #f8f8f8;
          }

          &::after {
            background: #f2f2f2;
          }
        }

        &::before {
          position: absolute;
          right: 111px;
          display: block;
          width: 16px;
          height: 8px;
          content: " ";
          font-size: 0;
          z-index: 1;
          top: 0;
          background: #fafafa;
          border-radius: 0 0 18px 18px;
        }

        &::after {
          position: absolute;
          right: 111px;
          display: block;
          width: 16px;
          height: 8px;
          content: " ";
          font-size: 0;
          z-index: 1;
          bottom: 0;
          background: #f8f8f8;
          border-radius: 18px 18px 0 0;
        }

        &:nth-child(3n) {
          margin-right: 0;
        }

        .text {
          flex: 1;
          position: relative;
          padding-right: 20px;

          &::after {
            position: absolute;
            right: 0;
            top: 0;
            bottom: 0;
            display: block;
            width: 0;
            height: auto;
            content: " ";
            font-size: 0;
            border: 1px dashed #e1251b;
            opacity: 0.1;
          }

          .coupon-price {
            display: flex;
            color: #e1251b;
            align-items: center;
            line-height: 1;

            .symbol {
              font-size: 18px;
              margin-right: 2px;
              font-family: arial;
              margin-top: 15px;
            }

            .big {
              font-size: 40px;
              max-width: 105px;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
            }

            .symbol-s {
              font-size: 14px;
              margin-left: 2px;
              margin-top: 15px;
              font-weight: 600;
            }

            .limit {
              border-radius: 2px;
              margin-left: 10px;
              padding: 4px 7px;
              margin-top: 13px;
              font-family: arial;
              max-width: 95px;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
              background: -webkit-linear-gradient(bottom, #ffd4d7, #fff9f9);
              background: -o-linear-gradient(top, #ffd4d7, #fff9f9);
              background: -moz-linear-gradient(top, #ffd4d7, #fff9f9);
              background: linear-gradient(to top, #ffd4d7, #fff9f9);
              position: relative;
              z-index: 1;
            }
          }

          .range {
            width: 176px;
            margin-top: 10px;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 1;
            overflow: hidden;
            text-overflow: ellipsis;
          }

          .time {
            width: 176px;
            color: #999;
            margin: 5px 0 0;
            font-family: arial;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 1;
            overflow: hidden;
            text-overflow: ellipsis;
          }
        }

        .rest {
          width: 78px;
          margin-left: 20px;
          text-align: center;

          .number {
            font-family: arial;
            margin-top: 10px;
          }

          .scale {
            width: 74px;
            background: #f5f5f5;
            height: 10px;
            border-radius: 20px;
            margin: 5px auto 0;
            position: relative;
            overflow: hidden;

            .percent {
              background: #e1251b;
              display: block;
              height: 10px;
            }
          }

          .btn {
            display: block;
            margin-top: 12px;
            color: #fff;
            background: #e1251b;
            border-radius: 30px;
            padding: 5px 0;
          }
        }
      }
    }
  }

  /* 商品券 */
  .coupons-con {
    .con-box {
      .s-item {
        display: flex;
        align-items: center;
        padding: 20px;
        background: #fff;
        box-shadow: 0 10px 20px rgba(0, 0, 0, .05);
        width: 545px;
        margin: 20px 20px 0 0;
        position: relative;
        transition: all 0.2s;
        border-radius: 5px;

        &:hover {
          box-shadow: 0 10px 20px rgba(0, 0, 0, .07);

          &::before {
            background: #f9f9f9;
          }

          &::after {
            background: #f3f3f3;
          }
        }

        &::before {
          position: absolute;
          right: 168px;
          display: block;
          width: 16px;
          height: 8px;
          content: " ";
          font-size: 0;
          z-index: 1;
          top: 0;
          background: #fafafa;
          border-radius: 0 0 18px 18px;
        }

        &::after {
          position: absolute;
          right: 168px;
          display: block;
          width: 16px;
          height: 8px;
          content: " ";
          font-size: 0;
          z-index: 1;
          bottom: 0;
          background: #f5f5f5;
          border-radius: 18px 18px 0 0;
        }

        &:nth-child(2n) {
          margin-right: 0;
        }

        img {
          width: 100%;
          height: 100%;
        }

        .goods-box {
          flex: 1;
          padding-right: 20px;
          position: relative;

          &::after {
            position: absolute;
            right: 0;
            top: 0;
            bottom: 0;
            display: block;
            width: 0;
            height: auto;
            content: " ";
            font-size: 0;
            border: 1px dashed #e1251b;
            opacity: 0.1;
          }

          .shop-msg {
            display: flex;
            align-items: center;

            .logo {
              font-size: 0;
              width: 40px;
              height: 40px;
              border-radius: 50%;
              overflow: hidden;

              img {
                border-radius: 50%;
              }
            }

            .name {
              font-size: 14px;
              font-weight: 600;
              flex: 1;
              margin-left: 10px;
              display: -webkit-box;
              -webkit-box-orient: vertical;
              -webkit-line-clamp: 1;
              overflow: hidden;
              text-overflow: ellipsis;
            }
          }

          .prods {
            margin-top: 10px;
            display: flex;

            .p-item {
              margin-left: 20px;

              &:first-child {
                margin-left: 0;
              }

              .img {
                width: 110px;
                height: 110px;
                font-size: 0;
              }

              .price {
                margin-top: 5px;
                justify-content: center;
                height: 15px;
              }
            }
          }
        }

        .rest {
          width: 135px;
          margin-left: 20px;
          text-align: center;

          .coupon-price {
            display: flex;
            color: #e1251b;
            align-items: center;
            justify-content: center;
            line-height: 1;

            .symbol {
              font-size: 18px;
              margin-right: 2px;
              font-family: arial;
              margin-top: 15px;
            }

            .big {
              font-size: 40px;
              max-width: 115px;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
            }

            .symbol-s {
              font-size: 14px;
              margin-left: 2px;
              margin-top: 15px;
              font-weight: 600;
            }
          }

          .limit {
            margin: 10px 0;
            font-family: arial;
            text-overflow: ellipsis;
            white-space: nowrap;
            font-size: 14px;
          }

          .scale {
            width: 90px;
            background: #ffb5af;
            height: 13px;
            border-radius: 20px;
            margin: 0 auto;
            position: relative;
            overflow: hidden;
          }

          .number {
            font-family: arial;
            position: absolute;
            top: 1px;
            left: 0;
            z-index: 1;
            width: 100%;
            line-height: 1;
            color: #fff;
          }

          .percent {
            background: #e1251b;
            display: block;
            height: 100%;
            border-radius: 20px 0 0 20px;
          }

          .btn {
            display: block;
            margin: 20px auto 0;
            width: 100px;
            color: #fff;
            background: #e1251b;
            border-radius: 30px;
            padding: 7px 0;
          }
        }
      }
    }
  }

  /* 单商品 */
  .coupons-con {
    .con-box {
      .s-item.single {
        &::before {
          width: 0;
          height: 0;
        }

        &::after {
          width: 0;
          height: 0;
        }
      }

      .s-item {
        .single-box {
          flex: 1;
          display: flex;

          .img {
            width: 180px;
            height: 180px;
          }

          .text-box {
            flex: 1;
            margin-left: 20px;

            .goods-name {
              font-size: 14px;
              font-weight: 600;
              height: 40px;
              line-height: 20px;
              display: -webkit-box;
              -webkit-box-orient: vertical;
              -webkit-line-clamp: 2;
              overflow: hidden;
              text-overflow: ellipsis;
              margin-top: 5px;
              word-break: break-all;
              line-break: anywhere;
            }

            .scale-box {
              margin-top: 15px;
              display: flex;
              align-items: center;

              .number {
                margin-right: 10px;
              }

              .scale {
                width: 130px;
                background: #ffd8d8;
                height: 12px;
                border-radius: 20px;
                position: relative;
                overflow: hidden;

                .percent {
                  background: #e1251b;
                  display: block;
                  height: 100%;
                  border-radius: 20px 0 0 20px;
                }
              }
            }

            .coupon-info {
              margin-top: 35px;
              background: #fff5f5;
              display: flex;
              border-radius: 5px;
              position: relative;

              &::before {
                position: absolute;
                right: 64px;
                display: block;
                width: 12px;
                height: 6px;
                content: " ";
                font-size: 0;
                background: #fff;
                z-index: 1;
                top: 0;
                border-radius: 0 0 12px 12px;
              }

              &::after {
                position: absolute;
                right: 64px;
                display: block;
                width: 12px;
                height: 6px;
                content: " ";
                font-size: 0;
                background: #fff;
                z-index: 1;
                bottom: 0;
                border-radius: 12px 12px 0 0;
              }

              .coupon-price {
                flex: 1;
                padding: 15px;
                display: flex;
                color: #e1251b;
                align-items: center;
                line-height: 1;

                .symbol {
                  font-size: 18px;
                  margin-right: 2px;
                  font-family: arial;
                  margin-top: 15px;
                }

                .big {
                  font-size: 40px;
                  max-width: 115px;
                  overflow: hidden;
                  text-overflow: ellipsis;
                  white-space: nowrap;
                }

                .symbol-s {
                  font-size: 14px;
                  margin-left: 2px;
                  margin-top: 15px;
                  font-weight: 600;
                }
              }

              .limit {
                margin-top: 15px;
                font-family: arial;
                font-size: 14px;
                margin-left: 10px;
                color: #000;
              }

              .btn {
                display: flex;
                width: 40px;
                padding: 0 13px 0 17px;
                color: #fff;
                background: #e1251b;
                font-size: 14px;
                align-items: center;
                text-align: center;
                line-height: 20px;
                border-radius: 5px;
                letter-spacing: 2px;
              }
            }
          }
        }
      }
    }
  }

  /* 按钮 */
  .coupons-con {
    .con-box {
      .icon {
        width: 60px;
        height: 60px;
        background: url(@/assets/images/icons.png) no-repeat;
      }

      .icon-en {
        img {
          width: 60px;
          height: 60px;
        }
      }

      .item {
        .icon-en {
          position: absolute;
          top: 60px;
          right: 130px;
          z-index: 10;
        }

        .icon {
          position: absolute;
          top: 60px;
          right: 130px;
          z-index: 10;
        }
      }

      .s-item {
        .icon-en {
          position: absolute;
          top: 10px;
          right: 187px;
        }

        .icon {
          position: absolute;
          top: 10px;
          right: 187px;
        }
      }

      .s-item.single {
        .icon-en {
          position: absolute;
          top: 65px;
          right: 20px;
        }

        .icon {
          position: absolute;
          top: 65px;
          right: 20px;
        }
      }

      .icon.received-icon {
        background-position: -130px -799px;
      }

      .icon.robbed-icon {
        background-position: -195px -799px;
      }
    }
  }

  /* 已领取 */
  .coupons-con {
    .con-box {
      .item.received {
        .rest {
          .btn {
            background: #fff;
            color: #e1251b;
            padding: 4px 0;
            border: 1px solid #e1251b;
          }
        }
      }

      .s-item.received {
        .rest {
          .btn {
            width: 98px;
            background: #fff;
            color: #e1251b;
            padding: 6px 0;
            border: 1px solid #e1251b;
          }
        }
      }
    }
  }

  /* 已抢光 */
  .coupons-con {
    .con-box {
      .item.robbed {
        .text {
          .coupon-price {
            color: #999;

            .limit {
              background: #f0f0f0;
            }
          }

          .range {
            color: #999;
          }

          &::after {
            border-color: #333;
          }
        }

        .rest {
          .number {
            color: #999;
          }

          .scale {
            .percent {
              background: #f0f0f0;
            }
          }

          .btn {
            background: #fff;
            color: #999;
            padding: 4px 0;
            border: 1px solid #eee;
          }
        }
      }

      .s-item.robbed {
        .rest {
          .coupon-price {
            color: #999;
          }

          .limit {
            color: #999;
          }

          .number {
            color: #999;
          }

          .scale {
            background: #f0f0f0;
          }

          .percent {
            background: #f0f0f0;
          }

          .btn {
            width: 98px;
            background: #fff;
            color: #999;
            padding: 6px 0;
            border: 1px solid #eee;
          }
        }

        .single-box {
          .text-box {
            .scale-box {
              .number {
                color: #999;
              }

              .scale {
                background: #f0f0f0;

                .percent {
                  background: #f0f0f0;
                }
              }
            }

            .coupon-info {
              .coupon-price {
                color: #999;
              }

              .limit {
                color: #999;
              }

              background: #f9f9f9;

              .btn {
                background: #ccc;
                color: #fff;
              }
            }
          }
        }

        .goods-box {
          &::after {
            border-color: #333;
          }
        }
      }
    }
  }
}

/* 领券中心 end  */
